/*
  学习目标：hooks补充- useRef
  作用:  给函数式组件内, 创建ref
  ref使用场景:
     1. 获取dom 
     2. 获取组件实例对象
     3. 💥 保存不需要渲染的数据
*/

import React, { useRef } from "react";
import { useEffect } from "react";
import { useState } from "react";

export default function App() {
  // 创建ref对象
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点我激活input</button>
    </div>
  );
}

function Child() {
  const timerIdRef = useRef();
  console.log("timerIdRef  ----->  ", timerIdRef);

  // 挂载后, 开启定时器
  useEffect(() => {
    timerIdRef.current = setInterval(() => {
      console.log("定时器在跑  ----->  ");
    }, 500);
  }, []);

  // 卸载时, 关闭定时器
  useEffect(() => {
    return () => {
      clearInterval(timerIdRef.current);
    };
  }, []);
  return <h1>Child</h1>;
}
